<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="社员管理" name="first">
      <el-tabs :tab-position="tabPosition" style="height: 100%">
        <el-tab-pane label="社员管理">
          <keep-alive include="EmpList,EmpDetail">
            <component :is="comName" :empNum="empNum"></component>
          </keep-alive>
        </el-tab-pane>
        <el-tab-pane label="a">配置管理</el-tab-pane>
        <el-tab-pane label="c">角色管理</el-tab-pane>
        <el-tab-pane label="d">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
import EmpList from "./EmpList";
import EmpDetail from "./EmpDetail";

// YHL
export default {
  name:'list',
  data() {
    return {
      activeName: "first",
      tabPosition: "left",
      comName: "EmpList",
      empNum: ''
    };
  },
  components: {
    EmpList,
    EmpDetail,
  },
  mounted() {
    this.$bus.$on("editName", (data) => {
      this.empNum = data.u;
      this.comName = data.t;
    });
    this.$bus.$on("editListName", (data) => {
      this.comName = data;
    });
  },
  beforeDestroy() {
    this.$bus.$off("editName");
    this.$bus.$off("editListName");
  },
  methods: {},
};
</script>